<template>
    <div class="app-container antifraud-propaganda">
      <el-form
        :model="queryParams"
        ref="queryRef"
        v-show="showSearch"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入标题"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
            @clear="resetQuery"
          />
        </el-form-item>
        <el-form-item label="时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            type="date"
            placeholder="请选择时间"
            clearable
            format="YYYY年MM月DD日"
            value-format="YYYY-MM-DD"
            @clear="resetQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['antifraudPropaganda:add']"
            >添加廉政漫画</el-button
          >
        </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
  
      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableList" border>
        <el-table-column label="序号" type="index" align="center" width="70" />
        <el-table-column
          label="标题"
          prop="title"
          show-overflow-tooltip
          align="center"
          min-width="50px"
        />
        <el-table-column
          label="时间"
          align="center"
          prop="createTime"
          width="160"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="内容"
          prop="content"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center" width="100">
          <template #default="scope">
            <el-image
              v-if="scope.row.imgUrl"
              style="width: 75px; height: 60px"
              :src="baseUrl + scope.row.imgUrl"
              :preview-src-list="[baseUrl + scope.row.imgUrl]"
              hide-on-click-modal="true"
              preview-teleported="true"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="浏览量"
          align="center"
          prop="viewCount"
          width="80"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="180"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              text
              @click="handleDetail(scope.row)"
              v-hasPermi="['antifraudPropaganda:detail']"
            >
              查询
            </el-button>
  
            <el-button
              link
              type="primary"
              text
              @click="handleUpdate(scope.row)"
              v-hasPermi="['antifraudPropaganda:edit']"
            >
              编辑
            </el-button>
  
            <el-button
              link
              type="primary"
              text
              @click="handleDelete(scope.row)"
              v-hasPermi="['antifraudPropaganda:remove']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改对话框 -->
      <el-dialog
        :title="title"
        v-model="open"
        width="35vw"
        align-center
        append-to-body
      >
        <el-form
          ref="fireSafetyRef"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title" required>
                <el-input v-model="form.title" placeholder="请输入标题" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="图片">
                <image-upload
                  v-model="form.imgUrl"
                  :isShowTip="false"
                  :limit="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="视频">
                <file-upload
                  v-model="form.videoUrl"
                  :isShowTip="false"
                  isVideo
                  :limit="1"
                  :fileType="[
                    'ogm',
                    'wmv',
                    'mpg',
                    'webm',
                    'ogv',
                    'mov',
                    'asx',
                    'mpeg',
                    'mp4',
                    'm4v',
                    'avi',
                  ]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="内容" prop="content" required>
                <WangEditor v-if="open" v-model="form.content"></WangEditor>
              </el-form-item>
            </el-col>
            <span style="padding-left: 5rem; color: #909399"
              >温馨提示：便于在微信小程序上的最佳展示效果，推荐图片尺寸比例100%，位置居中。</span
            >
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
  
      <!-- 详情对话框 -->
      <el-dialog
        title="反诈宣传"
        v-model="openDetail"
        width="35vw"
        align-center
        append-to-body
      >
        <el-form ref="detailRef" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题">{{ form.title }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="浏览量"
                >{{ form.viewCount }} 人次</el-form-item
              >
            </el-col>
            <el-col :span="12">
              <el-form-item label="时间">{{
                parseTime(form.createTime)
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片">
                <el-image
                  v-if="form.imgUrl"
                  style="width: 100px; height: 100px"
                  :src="baseUrl + form.imgUrl"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[baseUrl + form.imgUrl]"
                  :initial-index="0"
                  fit="contain"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="视频">
                <video
                  v-if="form.videoUrl"
                  ref="videoRef"
                  width="100%"
                  height="200"
                  controls
                  :src="baseUrl + form.videoUrl"
                ></video>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容">
                <div class="rich-text-container" v-html="form.content"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="close">关 闭</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="">
  import {
    listAntifraudPropaganda,
    addAntifraudPropaganda,
    updateAntifraudPropaganda,
    delAntifraudPropaganda,
    integrityselectOne,
  } from "@/api/honesty/index";
  
  const { proxy } = getCurrentInstance();
  
  const tableList = ref([]);
  const open = ref(false);
  const openDetail = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const total = ref(0);
  const title = ref("");
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  const videoRef = ref(null);
  
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      title: undefined,
      createTime: undefined,
      type:3
    },
    rules: {
      title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
      content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
    },
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询角色列表 */
  function getList() {
    loading.value = true;
    listAntifraudPropaganda(queryParams.value).then((response) => {
      const { data } = response;
      tableList.value = data.records ?? [];
      total.value = data.total;
      loading.value = false;
    });
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  
  /** 取消按钮 */
  function cancel() {
    open.value = false;
    reset();
  }
  
  /** 关闭按钮操作 */
  function close() {
    openDetail.value = false;
    reset();
    if (videoRef.value) {
      videoRef.value.pause();
      videoRef.value = null;
    }
  }
  
  /** 表单重置 */
  function reset() {
    form.value = {
      id: undefined,
      title: undefined,
      imgUrl: undefined,
      videoUrl: undefined,
      content: undefined,
    };
    proxy.resetForm("fireSafetyRef");
  }
  
  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加廉政漫画";
  }
  
  /** 查询按钮操作 */
  function handleDetail(row) {
    integrityselectOne({ id: row.id, type: "admin" }).then((response) => {
      form.value = response.data;
      openDetail.value = true;
    });
  }
  
  /**修改按钮操作 */
  function handleUpdate(row) {
    reset();
    integrityselectOne({ id: row.id, type: "admin" }).then((response) => {
      form.value = response.data;
      open.value = true;
      title.value = "廉政漫画编辑";
    });
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["fireSafetyRef"].validate((valid) => {
      if (valid) {
        form.value.type = 3;
        if (form.value.id != undefined) {
          updateAntifraudPropaganda(form.value).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addAntifraudPropaganda(form.value).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal
      .confirm("确认删除该数据", "删除确认")
      .then(function () {
        return delAntifraudPropaganda(row.id);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }
  
  getList();
  </script>
  
  <style lang="scss" scoped>
  .antifraud-propaganda {
    :deep(.el-table td.el-table__cell div) {
      white-space: wrap;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
  </style>
  
  <style>
  .rich-text-container {
    img {
      max-width: 25vw;
    }
  }
  </style>
  